<template>
    <div class="father">
        <h3>父组件</h3>
        <div class="category">
            <Category>

                <template #s>
                    <h2>游戏列表</h2>
                </template>

                <!-- 取数方案： #s1=xxxx, v-slot:s1=xxxx -->
                <template v-slot:s1="params">

                    <!-- 从子组件中获取数据，渲染数据个子模块 -->
                    <ul>
                        <li v-for="index in params.titles" :key="index.id">
                            {{ index.id }} ---- {{ index.title }}
                        </li>
                    </ul>
                </template>

                <template #s2>
                    <p>热门游戏排行</p>
                </template>
            </Category>

            <Category>
                <template #s>
                    <h2>游戏列表2</h2>
                </template>

                <template #s1="params">
                    <ol>
                        <li v-for="index in params.titles" :key="index.id">
                            {{ index.id }} ---- {{ index.title }}
                        </li>
                    </ol>
                </template>

                <template #s2>
                    <p>热门游戏排行2</p>
                </template>

            </Category>
        </div>

    </div>
</template>

<script setup lang="ts" name="Slot">
import { reactive, ref } from 'vue';
import Category from "@/components/demo8/Category.vue";




let url = 'https://z1.ax1x.com/2023/11/19/piNxL04.jPg';

</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}

.category {
    display: flex;
    justify-content: space-evenly;
}
</style>
